<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无锡阳山水蜜桃 相关活动</title>
    <style>
      /* 隐藏模态框 */
      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
      }

      /* 模态框内容 */
      .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
      }

      /* 关闭按钮 */
      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    </style>
</head>
<body>
    <h1>无锡阳山水蜜桃活动展示 </h1>
    <br>
    <a href="./index.html">无锡阳山水蜜桃首页</a>
    <br>
    <a href="./historical_information.html">无锡阳山水蜜桃历史</a>
    <br>
    <a href="./introduction.html">无锡阳山水蜜桃简介</a>
    <br>
    <a href="./goods_shelf.html">无锡阳山水蜜桃商品</a>
    <br>
    <a href="./activity.html">无锡阳山水蜜桃活动</a>
    <br>
    <a href="../../user/templates/user_information.html">用户</a>
    <br>

    <button id="loginButton">Login</button>
    <div id="loginModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Login</h2>
        <form id="loginForm">
          <label for="username">Username:</label>
          <input type="text" id="username">
            <br>
          <label for="password">Password:</label>
          <input type="password" id="password">
            <br>
          <input type="submit" value="Login">
        </form>
      </div>
    </div>

    <script>
      // 获取模态框和按钮元素
      var modal = document.getElementById("loginModal");
      var btn = document.getElementById("loginButton");
      var span = document.getElementsByClassName("close")[0];
      var form = document.getElementById("loginForm");

      // 当用户单击按钮时打开模态框
      btn.onclick = function() {
        modal.style.display = "block";
      }

      // 当用户单击关闭按钮时关闭模态框
      span.onclick = function() {
        modal.style.display = "none";
      }

      // 当用户单击模态框外部时关闭模态框
      window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }

      // 当用户提交表单时输出用户名和密码到控制台
      form.onsubmit = function(event) {
        event.preventDefault();
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        console.log("Username:", username);
        console.log("Password:", password);
        modal.style.display = "none";
      }
    </script>
</body>
</html>